<!--实现全国地图下钻，由于涉及JSON文件较多，所以就直接引用在线JSON https://geo.datav.aliyun.com/areas_v3/bound/-->
<template>
  <div class="map">
     
        <div class="btnWrapper" v-if="this.layer === 3">
        
          <!-- 酒店选择 -->
          <hotel-select></hotel-select>

         <!-- 路线按钮 -->
          <div v-on:click="routeClick">
            <img src="../../../assets/img/home/路线.png"/>
          </div>
        </div>

        <el-dialog title='生成路线' :visible.sync="routeDialogFormVisible" width="400px">
          <el-form :model="routeForm">
            <el-form-item label="路线名称:" :label-width="formLabelWidth">
              <el-input v-model="routeForm.routeName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路线简介:" :label-width="formLabelWidth">
              <el-input v-model="routeForm.brief" autocomplete="off" type="textarea" :rows="2"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="collectRouteInf">确 定</el-button>
          </div>
        </el-dialog>
      
        <!-- 搜索框 -->
        <div class="aaa">
            <div class="locationImg">
              <img src="../../../assets/img/home/地图_定位.png"/>
            </div>
            <div class="search">
                <search-input
                    :plhText="searchPlhText"
                    @input-changed="searchInputChange"
                    class="searchInput"
                ></search-input>
                <!-- 搜索内容提示 -->
                <div class="showSearch" v-show="isShow">
                    <show-search></show-search>
                </div>
            </div>
        </div>
        <!-- 开始按钮 -->
        <div v-show = "showDrawer">
            <drawer
            v-on:onPickUp= "pickUp"
            :region="this.region"
            :layer="this.layer"
            ></drawer>
        </div>
        <!-- 地图展示 -->
    <div class="areaRankingAll" ref="areaRankingAll"></div>

		<!-- <div>
			<button type="button" @click="cancel">返回上一级</button>
		</div> -->
	</div>
</template>

<script>
import axios from 'axios'// 采用axios动态请求数据
import searchInput from './searchInput.vue'
import showSearch from './showSearch.vue'
import Drawer from './Drawer.vue'

import { addScenicRoute, getAllJournery } from '@/network/home'
import HotelSelect from './HotelSelect'

const echarts = require('echarts')
export default {
  name: 'areaRankingAll',
  components: {
    searchInput,
    showSearch,
    Drawer,
    HotelSelect
  },
  mounted () {
    // console.log(this.allJournery);
    this.$bus.$on('is-show', this.isShowSearch)
    this.$bus.$on('change-is-show', this.changeIsShow)
    this.initChart()// 初始化地图
  },
  created () {
    // 初始化页面参数，按照生命周期，子组件需要的参数父组件需要在created生命周期取值
    // this.initParams('China.json')
  },
  computed: {
    filteredHotels() {
      // 根据选择的酒店星级过滤酒店名字选项
      return this.selectedLevel ? this.hotels.filter(hotel => hotel.level === this.selectedLevel) : this.hotels;
    }
  },
  data () {
    return {
      // 表单弹窗
      routeDialogFormVisible: false,
      selectedLevel: '',//被选中的酒店星级
      // selectedHotels: [],//对应的星级酒店
      routeForm: {
        routeName:'',
        brief:''
      },
      formLabelWidth: '100px',
      myChart: null,
      // 线上请求JSON文件数据地址
      publicUrl: 'https://geo.datav.aliyun.com/areas_v3/bound/',
      allCode: [],
      searchPlhText: '请输入目的地...',
      productList: [], // 地点列表x`
      productListRst: [], // 搜索筛选之后的地点列表
      isShow: false, // 是否展示搜索提示框
      showDrawer: false, // 是否展示抽屉
      allJournery: [], // 所有景点数据
      showJourery: false, // 是否展示景点
      testArr: [
        { name: '黑龙江', value: [128.03, 47.01] }
      ],
      region: '', // 当前地名
      layer: 1
    }
  },
  methods: {
    // 路线按钮
    routeClick(){
      if(this.$store.state.scenicArray.length < 2 )  alert('请至少选择两个以上景点再点击生成路线按钮!')
      else this.routeDialogFormVisible = true
    },
    // 收集路线信息
    async collectRouteInf(){
      this.routeDialogFormVisible = false
      const routeobj = {}
      routeobj.userId = JSON.parse(localStorage.user).id
      routeobj.brief = this.routeForm.brief
      routeobj.routeName = this.routeForm.routeName
      routeobj.route = this.$store.state.scenicArray
      await addScenicRoute(routeobj)
      alert('已为您生成专属路线！');
    },
    
    // 获取景点数据
    async getJourney () {
      const { data: { data: res } } = await getAllJournery()
      this.allJournery = res
      console.log('临时处理方案');
    },
    pickUp (showDrawer) {
      this.showDrawer = showDrawer
    },
    cancel () {
      this.initChart()
    },
    getGeoJson (jsonName) {
      axios.get(this.publicUrl + jsonName).then(res => {
        this.geoCoordMap = res
      })
      return axios.get(this.publicUrl + jsonName)
    },
    // 根据data得到每个data中城市的坐标
    convertData (data) {
      const res = []
      for (let i = 0; i < data.length; i++) {
        const fromCoord = this.geoCoordMap[data[i].name]// 获取城市的坐标 source
        const toCoord = this.geoCoordMap[data[i].value]// 获取城市的坐标 destination
        if (fromCoord && toCoord) {
          res.push({
            fromName: data[i].name,
            toName: data[i].value,
            coords: [fromCoord, toCoord]
          })
        }
      }
      return res
    },
    // 根据data得到放射光标效果图。如果起始城市没有值的话，就只显示目的城市
    convertData1 (data) {
      const res = []
      for (let i = 0; i < data.length; i++) {
        const geoCoord = this.geoCoordMap[data[i].name]
        const geoCoord1 = this.geoCoordMap[data[i].value]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
        if (geoCoord1) {
          res.push({
            name: data[i].value,
            value: geoCoord1.concat(data[i].name)
          })
        }
      }
      return res
    },
    // 绘制地图
    async initEcharts (geoJson, name, chart) {
      const self = this
      // 获取景点信息并存储到this.allJournery中
      await self.getJourney()
      // console.log(self.allJournery);
      // this.myChart = echarts.init(this.$refs.areaRankingAll);
      if (self.layer == 3) {
        this.testArr = this.allJournery
      } else {
        this.testArr = []
      }
      echarts.registerMap(name, geoJson)
      // console.log(self.allJournery);
      const option = {
        // 背景颜色
        backgroundColor: '#11dff1',
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            legendHoverLink: true,
            symbolSize: [60, 60],
            // 这里渲染标志里的内容以及样式
            label: {
              show: true,
              formatter (value) {
                // console.log(value);
                return value.name
              },
              color: 'black'
            },
            // 标志的样式
            itemStyle: {
              normal: {
                color: 'rgba(255,0,0,.7)',
                shadowBlur: 2,
                shadowColor: 'D8BC37'
              }
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            // 至于如何展示，完全是靠上面的formatter来自己定义的
            data: self.testArr,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }
          // {
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   effectType: "ripple",
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     period: 10,
          //     scale: 10,
          //     brushType: "fill",
          //   },

          //   hoverAnimation: true,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(255, 235, 59, .7)",
          //       shadowBlur: 10,
          //       shadowColor: "#333",
          //     },
          //   },
          //   zlevel: 1,
          //   data: [
          //     { name: "西藏", value: [91.23, 29.5, 2333] },
          //     { name: "黑龙江", value: [128.03, 47.01, 1007] },
          //   ],
          // },
        ],
        geo: {
          map: name,
          zoom: 1.2,
          roam: true, // 是否开启平游或缩放
          label: { // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            show: true, // 是否显示标签。
            // 通常状态下的样式
            normal: {
              textStyle: {
                color: '#fff'
              }
            }
            // // 鼠标放上去的样式
            // emphasis: {
            // textStyle: {
            //     color: "#fff",
            // },
            // },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: '#11dff1',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: '#fff' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        graphic: [
          {
            type: 'text',
            left: '5%',
            top: '5%',
            style: {
              text: name,
              font: 'bolder 16px "Microsoft YaHei", sans-serif',
              fill: 'black'
            }
          }
        ]
      }

      chart.setOption(option, true)
      chart.off('click')
      chart.on('click', params => {
        // 每点击一次地图区域就修改区域名
        this.region = params.name.trim()
        // 弹出抽屉
        this.showDrawer = true
        if (params.data) {
          return
        }
        console.log(params)
        // 调层数
        this.layer++
        if (params.name == '上海市' || params.name == '北京市' || params.name == '天津市' || params.name == '香港特别行政区' || params.name == '澳门特别行政区') { this.layer = 3 }
        if (this.layer > 3) this.layer = 1

        // 点击区域时的行政编码，然后再进行匹配
        const clickCode = self.allCode.filter(areaJson => areaJson.name === params.name)[0].adcode
        // 1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己只有孩子们组成)
        // 2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己没有孩子们)
        // 声明：比如这里线上引用的父级JSON带有：地域行政编码_full.json(如中国 100000_full.json),子级JSON是行政编码.json(如廉江市 440881.json)
        self.getGeoJson(clickCode + '_full.json').then(res => {
          self.initEcharts(res.data, params.name, chart)
        }).catch(err => {
          console.log(err, 'err')
          self.getGeoJson('100000_full.json').then(China => {
            self.initEcharts(China.data, '中华人民共和国', chart)
          })
        })
      })
    },
    // 带头函数-初始化
    initChart () {
      const chart = echarts.init(this.$refs.areaRankingAll)
      // this.allCode获取所有的区域编码信息
      this.getGeoJson('all.json').then(all => {
        this.allCode = all.data
        // 获取所有地点放入数组中
        for (let i = 0; i < this.allCode.length; i++) {
          this.productList[i] = this.allCode[i].name
        }
        // 获取到所有地点列表之后，传出数据到showSearch
        this.$bus.$emit('getAreaName', this.productList)
      })
      // 初始化地图展示
      this.getGeoJson('100000_full.json').then(China => {
        this.initEcharts(China.data, '中华人民共和国', chart)
      })
    },

    // 获取
    // 地图搜索
    searchInputChange (areaName) {
      // 改区域名
      this.region = areaName
      // 弹出抽屉
      this.showDrawer = true
      // 调层数
      this.layer++
      if (areaName == '上海市' || areaName == '北京市' || areaName == '天津市' || areaName == '香港特别行政区' || areaName == '澳门特别行政区') { this.layer = 3 }
      if (this.layer > 3) this.layer = 1
      this.isShow = false
      const chart = echarts.init(this.$refs.areaRankingAll)
      const searchCode = this.allCode.filter(areaJson => areaJson.name === areaName)[0].adcode
      this.getGeoJson(searchCode + '_full.json').then(res => {
        this.initEcharts(res.data, areaName, chart)
      }).catch(err => {
        console.log(err, 'err')
        console.log('暂时没有该目的地数据！')
        this.getGeoJson('100000_full.json').then(China => {
          this.initEcharts(China.data, '中华人民共和国', chart)
        })
      })
    },
    // 是否展示搜索内容提示框
    isShowSearch (isShow) {
      this.isShow = isShow
    },
    // 是否收起搜索内容提示框
    changeIsShow (inf) {
      this.isShow = inf.isShow
      this.searchInputChange(inf.areaName)
    }

  },
  watch: {
    isShow (N, O) {
      this.isShow = N
    }
  }

}
</script>

<style scoped>
	.areaRankingAll{
		width: 100%;
		height: 800px;
    position: relative;
	}

  .map{
    position: relative;
  }

  .aaa{
    /* background-color: #fff; */
    display: flex;
    position: absolute;
    z-index: 1999;
    top: 1%;
    left: 7%;
    width: 100%;
  }
  /* 定位图标样式 */
  .locationImg {
      flex: 1;
  }

  .locationImg img{
    height: 30px;
    width: 30px;

  }

  /* 搜索框样式 */
  .search {
      flex: 2;
  }

  /* 预订酒店按钮样式 */
  .btnWrapper{
    position: absolute;
    left: 0;
    top: 20%;
    color: black;
    text-align: center;
    z-index: 999999;
  }

  .btnWrapper img{
    height: 30px;
    width: 30px;
  }
</style>

<!--
    本组件是echarts地图下钻组件
    可以支持中国，省，市的三级下钻，起点可以是中国，省，终点可以是 中国，省，市
    可以自定义纹理图，或者颜色以及高亮背景图，高亮颜色
    可以设置地图边框阴影的颜色以及范围，不传就用默认
    可以自定义散点图标,或散点图颜色
    可以自定义散点图的数据
    可以使用本身的返回按钮，也可以隐藏返回按钮自己调用返回方法
    可以传自定义的tooltip框的id,也可以不传用默认的

    事件：
    鼠标移入地图区域事件  $emit('mapMouseover')
    鼠标移出地图区域事件 $emit('mapMouseout')
    鼠标点击地图区域事件 $emit('mapClick')
    鼠标移入散点事件 $emit('pointMouseover')
    鼠标移出散点事件 $emit('pointMouseout')
    鼠标点击散点事件 $emit('pointClick')
    下钻事件 $emit('goDown')
    回钻事件 $emit('goUpside')
-->
<!-- <template>
    <div class="mapWrapper">
        <div class="map" ref="map"></div>
        <div class="map-btn" @click="returnUpLevel" v-if="history.length && showReturn">{{history[history.length - 1]}}</div>
    </div>
</template>

<script>
    import echarts from "echarts"
    import {getFontPx,isPointInAreas,getElementFixed} from './map/utils.js'

    const level1 = ['中国']
    const level2 = ['新疆维吾尔自治区','西藏自治区','内蒙古自治区','青海省','四川省','黑龙江省','甘肃省','云南省','广西壮族自治区','湖南省','陕西省','广东省','吉林省','河北省','湖北省','贵州省','山东省','江西省','河南省','辽宁省','山西省','安徽省','福建省','浙江省','江苏省','重庆市','宁夏回族自治区','海南省','台湾省','北京市','天津市','上海市','香港特别行政区','澳门特别行政区']
    export default {
        props:{
            start:{
                type:String,
                default:'中国' //也可以是某个省份
            },
            level:{
                type:Number,
                default:3 //总共分几级，默认三级：中国、生、市，最高也是3级，多于3级的按3级处理
            },
            areaColor:{
              type:String,
              default:'' //如果不用纹理的话可以定义颜色,填写这个参数地图纹理设置就无效
            },
            areaColorLight:{
              type:String,
              default:'' //如果不用纹理的话可以定义贴图颜色，填写这个参数地图高亮纹理就无效
            },
            texture:{
                type:String,
                default:'/img/mapTexture.png' //地图纹理贴图，可以传图片路径
            },
            textureLight: {
                type:String,
                default:'/img/mapTextureLight.png'//地图高亮纹理贴图，可以传图片路径
            },
            borderColor: {
                type:String,
                default:'#CAFCFC' //地图边界线颜色
            },
            shadowColor: {
                type:String,
                default:'#C3F4F4' //地图阴影颜色
            },
            tooltip: {
                type:String,
                default:'' //自定义tooltip框的id，不传就用echarts的tooltip
            },
            data: {
                type:Array,
                default() {
                    return [] //地图上的散点的数据
                }
            },
            effectData: {
              type:Array,
              default() {
                  return [] //地图上高亮的散点数据
              }
            },
            tooltipOffset:{
              type:Object,
              default() {
                  return {
                      x:0,
                      y:'-40px'
                  }
              }
            },
            pointColor: {
                type:String,
                default:'' //地图上散点的颜色
            },
            symbol: {
                type:String,
                default:'' //地图上散点的图标
            },
            showReturn: {
                type:Boolean,
                default: true //是否要显示返回按钮。。如果隐藏的话可以自己在外面定义隐藏按钮
            }
        },
        data() {
            return {
                chart:null,  //echarts图表
                options:{}, //echarts的options
                history:[],  //下钻过程中记录历史，方便返回
                currentLevel:1, // 目前所在层级
                startLevel:1, // 起始的level
                endLevel:3,  // 结束的level
                currentName:'',//当前的地图名字
                currentJson:null, //当前的json
                lastHoverParams:'',//上一个高亮的元素
            }
        },
        mounted() {
            this.init()
        },
        beforeDestroy() {
            if(this.chart){
                this.chart.dispose()
            }
            window.removeEventListener('resize', this.resize, false)
        },
        watch:{
            start(newVal){
                this.resolveStart()
                this.drawChart()
            },
            level(newVal){
                this.resolveLevel()
                this.drawChart()
            },
            areaColor(newVal){
                this.resolveTexture()
                this.drawChart()
            },
            areaColorLight(){
                this.resolveTextureLight()
                this.drawChart()
            },
            texture(newVal){
                this.resolveTexture()
                this.drawChart()
            },
            textureLight(newVal){
                this.resolveTextureLight()
                this.drawChart()
            },
            borderColor(newVal) {
                this.resolveBorderColor()
                this.drawChart()
            },
            shadowColor(newVal) {
                this.resolveShadowColor()
                this.drawChart()
            },
            tooltip(newVal) {
                this.resolveTooltip()
                this.drawChart()
            },
            data(newVal) {
                this.resolveData()
                this.drawChart()
            },
            pointColor(newVal) {
                this.resolveSymbol()
                this.drawChart()
            },
            symbol(newVal) {
                this.resolveSymbol()
                this.drawChart()
            }
        },
        methods:{
            //解析start参数
            resolveStart() {
                //先解析start是几级
                if(level1.indexOf(this.start) > -1) {
                    this.startLevel = 1
                }else if(level2.indexOf(this.start) > -1){
                    this.startLevel = 2
                }else{
                    this.startLevel = 1
                }
                this.currentName = this.start
                this.currentLevel = this.startLevel
                const mapname = this.currentName == '中国'?'china':this.currentName
                this.options.geo.map = mapname
                this.options.series[0].map = mapname
            },
            //解析level参数
            resolveLevel() {
                this.endLevel = this.startLevel + this.level - 1
                if(this.endLevel > 3) {
                    this.endLevel = 3
                }
                if(this.endLevel < 1) {
                    this.endLevel = 1
                }
            },
            //解析颜色或纹理
            resolveTexture() {
                if(this.areaColor){
                    this.options.series[0].itemStyle.areaColor = this.areaColor
                }else{
                    const imageDom = document.createElement("img")
                    imageDom.src = this.texture
                    this.options.series[0].itemStyle.areaColor = {
                        image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    }
                }
            },
            //解析高亮颜色或纹理
            resolveTextureLight() {
                if(this.areaColorLight){
                    this.options.series[0].emphasis.itemStyle.areaColor = this.areaColor
                }else{
                    const imageDomLight = document.createElement("img")
                    imageDomLight.src = this.textureLight
                    this.options.series[0].emphasis.itemStyle.areaColor = {
                        image: imageDomLight, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    }
                }
            },
            //解析borderColor
            resolveBorderColor() {
                this.options.series[0].itemStyle.borderColor = this.borderColor
            },
            //解析shadowColor
            resolveShadowColor() {
                this.options.geo.itemStyle.shadowColor = this.shadowColor
            },
            resolveSymbol() {
              if(this.pointColor) {
                  this.options.series[1].itemStyle = {
                      color:this.pointColor
                  }
              }
              if(this.symbol) {
                  this.options.series[1].symbol = this.symbol
              }
            },
            //解析tooltip
            resolveTooltip() {
                if(!this.tooltip) {
                    this.options.tooltip.show = true
                }else{
                    this.options.tooltip.show = false
                }
            },
            //解析data
            resolveData() {
                if(this.data && this.data.length > 0) {
                    this.options.series[1].data = this.data
                }
                if(this.effectData && this.effectData.length > 0) {
                    this.options.series[2].data = this.effectData
                }
            },
            initOptions() {
                this.options = {
                    tooltip:{
                      show:false
                    },
                    geo: {
                        map: '',
                        roam:false,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            shadowColor: '',
                            shadowOffsetX: '-2px',
                            shadowOffsetY: '10px',
                            shadowBlur: '5px'
                        }
                    },
                    series: [
                        {
                            type: 'map',
                            map: '',
                            roam: false,
                            tooltip:{
                              show:false
                            },
                            label: {
                                show:false,
                                color:'#fff'
                            },
                            itemStyle: {
                                areaColor:'',
                                borderColor: '',
                                borderWidth:'2px'
                            },
                            emphasis: {
                                itemStyle: {
                                    areaColor:''
                                },
                                label:{
                                    show:false
                                }
                            }
                        },
                        {
                            type:'scatter',
                            coordinateSystem: 'geo',
                            data: [],
                            symbol:'',
                        },
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            data: [],
                            showEffectOn: 'render',
                            rippleEffect: {
                                number:1,
                                scale:3,
                                brushType: 'fill'
                            },
                            emphasis: {
                                scale: true
                            },
                        }
                    ]
                }
            },
            //初始化
            init() {
                this.initOptions()
                this.resolveStart()
                this.resolveLevel()
                this.resolveTexture()
                this.resolveTextureLight()
                this.resolveBorderColor()
                this.resolveShadowColor()
                this.resolveSymbol()
                this.resolveTooltip()
                this.resolveData()
                this.drawChart()
            },
            async drawChart() {
                if(this.chart) {
                    this.chart.setOption(this.options);
                }else {
                    const el = this.$refs.map
                    const mapname = this.currentName=='中国'?'china':this.currentName
                    if (!echarts.getMap(mapname)) {
                        const mapJson = await this.getMapJson(this.currentName, this.currentLevel)
                        echarts.registerMap(mapname, mapJson)
                        this.currentJson = mapJson
                    }
                    const currentData = this.data.filter(item => {
                        return isPointInAreas([item.value[0],item.value[1]], this.currentJson)
                    })
                    this.options.series[1].data = currentData
                    const currentEffectData = this.effectData.filter(item => {
                        return isPointInAreas([item.value[0],item.value[1]], this.currentJson)
                    })
                    this.options.series[2].data = currentEffectData
                    this.chart = echarts.init(el);
                    this.chart.setOption(this.options);

                    window.addEventListener('resize', this.resize, false)

                    //绑定各种事件
                    this.chart.on('click', (params) => {
                        if (params.componentSubType == 'map') {
                            this.$emit('mapClick', params)
                            this.goDown(params.name)
                        } else if (params.componentSubType == 'scatter' || params.componentSubType == 'effectScatter') {
                            console.log(params.componentSubType,"click")
                            this.$emit('pointClick', params)
                        }
                    })

                    this.chart.on('mouseover',(params) => {
                        if (params.componentSubType == 'map') {
                            this.$emit('mapMouseover', params)
                            if(this.lastHoverParams.componentSubType == 'effectScatter') {
                                this.$emit('pointMouseout', this.lastHoverParams)
                                const tooltip = document.getElementById(this.tooltip)
                                tooltip.style.display = 'none'
                            }
                        } else if (params.componentSubType == 'scatter' || params.componentSubType == 'effectScatter') {
                            if(params.componentSubType == 'scatter' && this.lastHoverParams.componentSubType == 'effectScatter') {
                                this.$emit('pointMouseout', this.lastHoverParams)
                                const tooltip = document.getElementById(this.tooltip)
                                tooltip.style.display = 'none'
                            }
                            this.$emit('pointMouseover', params)
                            const tooltip = document.getElementById(this.tooltip)
                            tooltip.style.display = 'block'
                            const width = tooltip.clientWidth
                            const height = tooltip.clientHeight
                            let x = params.event.offsetX - width / 2
                            let y = params.event.offsetY - height + this.tooltipOffset.y

                            tooltip.style.top = y + 'px'
                            tooltip.style.left = x + 'px'

                            const fixedPosition = getElementFixed(tooltip)
                            const windowWidth = document.body.clientWidth

                            //判断上方有没有小于0，如果小于0，就让框放到下面去
                            if(fixedPosition.currentY < 0) {
                                let y = params.event.offsetY - this.tooltipOffset.y
                                tooltip.style.top = y + 'px'
                            }
                            //判断左边有没有小于0，如果小于0，就让框放到右边去
                            if(fixedPosition.currentX < 0) {
                                let x = params.event.offsetX - width / 2 - fixedPosition.currentX
                                tooltip.style.left = x + 'px'
                            }
                            //判断右边有没有小于0，如果小于0，就让框放到左边去
                            if((fixedPosition.currentX + width) > windowWidth) {
                                let x = params.event.offsetX - width / 2 - (fixedPosition.currentX + width - windowWidth)
                                tooltip.style.left = x + 'px'
                            }
                        }
                        this.lastHoverParams = params
                    })

                    this.chart.on('mouseout',(params) => {
                        if(params.componentSubType == 'scatter') {
                            if (params.componentSubType == 'map') {
                                this.$emit('mapMouseout', params)
                            } else if (params.componentSubType == 'scatter' || params.componentSubType == 'effectScatter') {
                                this.$emit('pointMouseout', params)
                                const tooltip = document.getElementById(this.tooltip)
                                tooltip.style.display = 'none'
                            }
                        }
                    })
                }
            },
            async getMapJson(name,level) {
                if(level == 1 || level == 2) {
                    const jsonData = await import('./map/'+name+'.json')
                    return jsonData.default
                }else if(level == 3) {
                    const jsons = this.currentJson.features.filter(item => item.properties.name == name)
                    const mapJson = {
                        "type": "FeatureCollection",
                        "features": jsons
                    }
                    return mapJson
                }
            },
            //下钻
            async goDown(name){
                //先判断可不可以下钻
                if(this.currentLevel > 2){
                    return false
                }
                if(this.currentLevel == this.endLevel) {
                    return false
                }
                //判断下钻的是几级
                const goDownLevel = this.currentLevel + 1
                //获取地图数据之后，修改地图options
                const mapname = name=='中国'?'china':name
                if (!echarts.getMap(name)) {
                    const newMapJson = await this.getMapJson(name,goDownLevel)
                    echarts.registerMap(mapname, newMapJson)
                    this.currentJson = newMapJson
                }else{
                    this.currentJson = echarts.getMap(mapname).geoJson
                }
                this.options.geo.map = mapname
                this.options.series[0].map = mapname
                const currentData = this.data.filter(item => {
                    return isPointInAreas([item.value[0],item.value[1]], this.currentJson)
                })
                this.options.series[1].data = currentData
                const currentEffectData = this.effectData.filter(item => {
                    return isPointInAreas([item.value[0],item.value[1]], this.currentJson)
                })
                this.options.series[2].data = currentEffectData
                //然后重新绘制地图
                this.history.push(this.currentName)
                this.chart.setOption(this.options)
                this.currentName = name
                this.currentLevel += 1
                this.$emit('goDown',{
                    name:this.currentName,
                    level:this.currentLevel,
                    json:this.currentJson
                })
            },
            //返回上级
            returnUpLevel() {
                //先判断history有没有数据，能不能返回
                if(this.history.length == 0){
                    return false
                }
                //取出要返回的那个名字
                const name = this.history.pop()
                const mapname = name=='中国'?'china':name
                this.currentJson = echarts.getMap(mapname).geoJson
                //修改地图配置重新绘制地图
                this.options.geo.map = mapname
                this.options.series[0].map = mapname
                const currentData = this.data.filter(item => {
                    return isPointInAreas([item.value[0],item.value[1]], this.currentJson)
                })
                this.options.series[1].data = currentData
                const currentEffectData = this.effectData.filter(item => {
                    return isPointInAreas([item.value[0],item.value[1]], this.currentJson)
                })
                this.options.series[2].data = currentEffectData
                this.chart.setOption(this.options)
                //修改当前的层级，名字，还有currentJson
                this.currentName = name
                this.currentLevel -= 1
                this.$emit('goUpside',{
                    name:this.currentName,
                    level:this.currentLevel,
                    json:this.currentJson
                })
            },
            resize () {
                window.setTimeout(() => {
                    if(this.chart) {
                        this.chart.resize()
                    }
                }, 100)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .mapWrapper {
        width:100%;
        height:100%;
        position: relative;
    }
    .map {
        width:100%;
        height:100%;
    }
    .map-btn {
        background: #132F56;
        font-size:0.72rem;
        color:#fff;
        cursor: pointer;
        display: inline-block;
        padding:0.5em 1.5em;
        position:absolute;
        left:1%;
        top:2%;
        border:1px solid #163F67;
    }
</style>

 -->
